<template>
  <div class="setting">
    <top-bar
      v-show="navShow"
      :isleftarrow="isleftarrow"
      :title="title"
      :rightIcon="rightIcon"
      :rightIconUser="rightIconUser"
    ></top-bar>
    <div class="space"></div>
    <!-- 登录注册按钮入口区域（采用条件渲染，使用Grid组件，假如已经登录过则显示头像单元格展示个人详细信息） -->
    <div class="userInfo" v-if="success === false">
      <van-grid clickable :column-num="2">
        <van-grid-item icon="manager-o" text="登录" to="/login" />
        <van-grid-item icon="add-o" text="注册" @click="noRegister()" />
      </van-grid>
    </div>
    <!-- 登陆后显示此区域，关闭按钮入口区域 -->
    <div style="height: 20px"></div>
    <div class="subRigButton" v-if="success === true">
<!--   左侧头像   -->
      <div class="user-img">
        <van-image
            round
            width="4rem"
            height="4rem"
            lazy-load
            src="https://placeholder.pics/svg/80x80/FF2030/FFF"/>
      </div>
<!--   右侧文字描述（包括昵称 权限身份）   -->
      <div class="user-detail">
        <div class="user-nickname">
          <span>用户ID:{{this.$store.state.userInfo.nickName}}</span>
        </div>
        <div class="user-role">
          <span>用户权限:{{this.$store.state.userInfo.roleName}}</span>
        </div>
        <div class="user-area">
          <span>所属单位:{{$store.getters.userAreaInfo}}</span>
        </div>
      </div>
    </div>
    <div style="height: 20px"></div>
    <!-- 各个单元格区域 -->
    <div class="cellArea" v-if="success === true">
      <van-cell value="关于我们" is-link @click="aboutUs()"/>
      <!-- 退出登录单元格只有当登陆成功了才会出现 -->
      <van-cell value="退出登录" is-link @click="quitLogin()"/>
    </div>
    <footer-bar></footer-bar>
  </div>
</template>

<script>
import TopBar from "../components/TopBar.vue";
import FooterBar from "../components/FooterBar.vue";
import {Dialog} from "vant";
export default {
  name: "Setting",
  components: { FooterBar, TopBar },
  data() {
    return {
      title: "",
      isleftarrow: "",
      navShow: true,
      rightIcon: "",
      rightIconUser: "",
      success:this.$store.state.userInfo.success
    };
  },
  methods:{
    aboutUs(){
      Dialog.alert({
        title:'关于我们',
        message:'版权归属：辽宁大学信息学院'
      })
      .then(()=>{
      })
    },
    quitLogin(){
      this.$store.state.userInfo.success = false;
      this.$store.state.userInfo.role = '';
      this.$store.state.userInfo.userArea = '';
      this.$router.push({
        name:'Index'
      })
    },
    noRegister(){
      Dialog.alert({
        title:'警告',
        message:'由于当前为内测环节，暂停注册。'
      })
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
    this.rightIcon = this.$route.meta.rightIcon;
    this.rightIconUser = this.$route.meta.rightIconUser;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = from.meta.isleftarrow;
    },
  },
};
</script>
<style scoped>
.space{
  height: 40px;
}
.subRigButton{
  border: 1px solid darkgrey;
  height: 90px;
  width: 90%;
  border-radius:5px;
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
}
.user-img{
  height: 65px;
  width: 65px;
  margin: 10px
}
.user-detail{
  height: 65px;
  width: 200px;
  margin: 10px;
  text-align: left;
}
.user-nickname{
  height: 22px;
  font-size: 18px;
  font-weight: bold;
  /*padding-top: 5px;*/
}
.user-role{
  height: 20px;
  padding-top: 5px;
  font-size: 15px;
}
.user-area{
  height: 20px;
  padding-top: 5px;
  font-size: 15px;
}

</style>